<template>
  <div class="app-container">
    <div class="filter-container tw-filter">
      <el-form ref="dataForm"  :model="form" label-position="right" label-width="150px" style="width: 800px; margin:0 auto;">
        <el-form-item label="站点名称">
          <el-input  v-model="form.site_name"  class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{site_name}</p>
        </el-form-item>
        <el-form-item label="站点备注">
          <el-input  v-model="form.site_remark"  class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{site_remark}</p>
        </el-form-item>
        <el-form-item label="站点域名">
          <el-input  v-model="form.site_domain" class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{site_domain} 不填写http://</p>
        </el-form-item>

<!--        <el-form-item label="浏览器图标">-->
<!--          <UploadOne v-on:uploadCallBack="uploadCallBack($event, 'browser_icon')" :showUrl="form.browser_icon_str" :formData="{dir_type:'common',file_name:'browser_icon.ico',allow_type:'ico'}" tip="{browser_icon} 上传ICO图标，推荐尺寸为128*128像素"></UploadOne>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="PC端Logo">-->
<!--          <UploadOne v-on:uploadCallBack="uploadCallBack($event, 'site_logo_pc')" :showUrl="form.site_logo_pc_str" :formData="{dir_type:'common',file_name:'site_logo_pc.png'}" tip="{site_logo_pc} PC端LOGO，通用头部显示，推荐尺寸为180*42像素"></UploadOne>-->
<!--        </el-form-item>-->

        <el-form-item label="首页图片" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'site_logo_wap')" :showUrl="form.site_logo_wap_str" :formData="{dir_type:'common',file_name:'site_logo_wap.png'}" tip="{site_logo_wap} 移动端端LOGO，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>

        <el-form-item label="开屏视频封面" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'site_video_img')" :showUrl="form.site_video_img_str" :formData="{dir_type:'common',file_name:'site_video_img.png'}" tip="{site_video_img} 移动端端LOGO，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="开屏视频">
          <UploadOne
            v-on:uploadCallBack="uploadCallBack($event, 'site_video')"
            :showUrl="form.site_video_str"
            :formData="{dir_type:'common', file_name:'site_video.mp4', allow_type:['mp4', 'avi', 'mov']}"
            tip="上传开屏视频，支持格式: mp4, avi, mov"
          ></UploadOne>

          <!-- 视频预览 -->
          <div v-if="form.site_video_str">
            <video controls style="max-width: 80%; height: 300px;">
              <source :src="form.site_video_str" type="video/mp4">
              你的浏览器不支持视频播放，请使用现代浏览器。
            </video>
          </div>
        </el-form-item>

        <el-form-item label="公司名称">
          <el-input  v-model="form.company_name" class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{company_name} </p>
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input  v-model="form.company_address" class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{company_address}</p>
        </el-form-item>
        <el-form-item label="服务热线">
          <el-input  v-model="form.company_phone" class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{company_phone} 多个用逗号隔开</p>
        </el-form-item>
        <!-- <el-form-item label="Email">
          <el-input  v-model="form.company_email" class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{company_email} 多个用逗号隔开</p>
        </el-form-item> -->
        <!-- <el-form-item label="QQ">
          <el-input  v-model="form.company_qq" class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{company_qq} 多个用逗号隔开</p>
        </el-form-item> -->
        <el-form-item label="版权信息">
          <el-input  v-model="form.site_copy" class="filter-item tw-filter-input" style="width:500px"/>
          <p class="tw-tip-text">{site_copy} 前台页面底部显示版权信息 </p>
        </el-form-item>
        <el-form-item label="ICP备案号">
          <el-input v-model="form.icp_number" style="display:flex; width:500px" class="filter-item tw-filter-input"/>
          <p class="tw-tip-text">{icp_number} 前台页面底部显示 </p>
        </el-form-item>
        <el-form-item label="网安备案号">
          <el-input v-model="form.security_number" style="display:flex; width:500px" class="filter-item tw-filter-input"/>
          <p class="tw-tip-text">{security_number} 前台页面底部显示 </p>
        </el-form-item>
        <el-form-item label="热门搜索词" prop="search_hot">
          <el-input v-model="form.search_hot" type="textarea" :rows="5" maxlength="250" show-word-limit placeholder="请输入热门搜索词" />
          <p class="tw-tip-text">{search_hot} 前台首页搜索框下面，多个用逗号隔开</p>
        </el-form-item>
        <el-form-item label="敏感词" prop="sensitive">
          <el-input v-model="form.sensitive" type="textarea" :rows="5" show-word-limit placeholder="请输入敏感词" />
          <p class="tw-tip-text">{sensitive} 多个用逗号隔开</p>
        </el-form-item>

        <el-form-item label="惠企政策" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_1')" :showUrl="form.nav_1_str" :formData="{dir_type:'common',file_name:'nav_1.png'}" tip="{nav_1} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="商联头条" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_2')" :showUrl="form.nav_2_str" :formData="{dir_type:'common',file_name:'nav_2.png'}" tip="{nav_2} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="会员服务" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_3')" :showUrl="form.nav_3_str" :formData="{dir_type:'common',file_name:'nav_3.png'}" tip="{nav_3} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="企业诉求" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_4')" :showUrl="form.nav_4_str" :formData="{dir_type:'common',file_name:'nav_4.png'}" tip="{nav_4} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="招商引资" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_5')" :showUrl="form.nav_5_str" :formData="{dir_type:'common',file_name:'nav_5.png'}" tip="{nav_5} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="银行专栏" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_6')" :showUrl="form.nav_6_str" :formData="{dir_type:'common',file_name:'nav_6.png'}" tip="{nav_6} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="商会风采" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_7')" :showUrl="form.nav_7_str" :formData="{dir_type:'common',file_name:'nav_7.png'}" tip="{nav_7} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>
        <el-form-item label="党建引领" >
          <UploadOne v-on:uploadCallBack="uploadCallBack($event,'nav_8')" :showUrl="form.nav_8_str" :formData="{dir_type:'common',file_name:'nav_8.png'}" tip="{nav_8} 移动端中间导航，推荐尺寸为100*100像素"></UploadOne>
        </el-form-item>


        <el-form-item label="是否开启API加密" prop="is_api_endecrypt">
          <el-radio-group v-model="form.is_api_endecrypt">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="微信公众号二维码">
          <UploadOne v-on:uploadCallBack="uploadCallBack($event, 'qrcode_wx')" :showUrl="form.qrcode_wx_str" :formData="{dir_type:'common'}" tip="{qrcode_wx} 推荐尺寸为270*270像素"></UploadOne>
        </el-form-item>
        <el-form-item label="微信小程序二维码">
          <UploadOne v-on:uploadCallBack="uploadCallBack($event, 'qrcode_wx_small')" :showUrl="form.qrcode_wx_small_str" :formData="{dir_type:'common'}" tip="{qrcode_wx_small} 推荐尺寸为270*270像素"></UploadOne>
        </el-form-item> -->
        <!-- <el-form-item label="多图上传">
          <UploadAll v-on:uploadCallBack="uploadCallBack($event, 'qrcode_wx_small_all')" :fileList="[]" :maxLimit="10" :formData="{dir_type:'common'}" tip="{qrcode_wx_small_all} 推荐尺寸为270*270像素"></UploadAll>
        </el-form-item> -->
      </el-form>
    </div>
    <div slot="footer">
      <el-button style="margin-left:40%;" v-waves class="filter-item tw-filter-button" @click="updateData()">保存数据</el-button>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import UploadOne from '@/components/Upload/UploadOne'
import UploadAll from '@/components/Upload/UploadAll'

export default {
  directives: { waves },
  components: { UploadOne, UploadAll },
  data() {
    return {
      apiPath: 'project.setting',
      // 表单数据
      form: {
        site_name:'',
        site_remark:'',
        site_domain:'',
        //browser_icon:'',
        //site_logo_pc:'',
        site_logo_wap:'',
        site_video_img:'',
        nav_1:'',
        nav_2:'',
        nav_3:'',
        nav_4:'',
        nav_5:'',
        nav_6:'',
        nav_7:'',
        nav_8:'',
        site_video:'',
        company_name:'',
        company_address:'',
        company_phone:'',
        //company_email:'',
        //company_qq:'',
        site_copy:'',
        icp_number:'',
        security_number:'',
        search_hot:'',
        sensitive:'',
        is_api_endecrypt:'',
        //qrcode_wx:'',
        //qrcode_wx_small:'',
        browser_icon_str:'',
       // site_logo_pc_str:'',
        site_logo_wap_str:'',
        nav_1_str:'',
        nav_2_str:'',
        nav_3_str:'',
        nav_4_str:'',
        nav_5_str:'',
        nav_6_str:'',
        nav_7_str:'',
        nav_8_str:'',
        site_video_str:'',
       // qrcode_wx_str:'',
        //qrcode_wx_small_str:'',
      }
    }
  },
  created() {
    // 获取详情
    this.$api.getDetail({}, this.apiPath).then(response => {
      //数据处理
      for(let key in this.form){
        if(response.detail.hasOwnProperty(key)){
          this.form[key] = response.detail[key]
        }
      }
    })
  },
  methods: {
    //文件上传回调
    uploadCallBack(res, fieldName=''){
      if(fieldName){
        this.form[fieldName] = res.fileName;
        this.form[fieldName+'_str'] = res.showUrl;
      }else{
        this.$message('图片字段错误！');
      }
    },
    // 保存数据
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$api.edit(this.form, this.apiPath).then(response => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          })
        }
      })
    }

  }
}
</script>
